<!doctype html>
<html>
<head>
	<script type="text/javascript" src="http://cdn.webix.io/edge/webix.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdn.webix.io/edge/webix.css">

	<script type="text/javascript" src="./colorlist.js"></script>
	<link rel="stylesheet" type="text/css" href="./colorlist.css">
</head>
<body>
	<div id="sample_div" style='width:250px; height:320px; margin:50px;'></div>
	<script type="text/javascript">
		webix.ui({
			container:"sample_div",
			rows:[
				{
					type:"header", template:"Try to select some options"
				},
				{	height:20 },
				{
					view:"colorlist", scroll:false, borderless:true,
					data:[
						{ value:"Category A", color:"#faf" },
						{ value:"Category B", color:"#ffa" },
						{ value:"Category C", color:"#faa" },
						{ value:"Category D", color:"#aaf" },
						{ value:"Category E", color:"#afa" }
					]
				}
			]
		});
	</script>
</body>
</html>